<template>
  <div class="add-form">
    <el-dialog title="创建用户" :visible="showDialog" @close="showDialogfa">
      <span slot="footer" class="dialog-footer">
        <!-- 表单 -->
        <div style="margin: 20px"></div>
        <el-form ref="ruleForm" label-position="right" :rules="rules" size="mini" label-width="100px" :model="ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item v-if="editidopen" label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input v-model="ruleForm.role"></el-input>
          </el-form-item>
          <el-form-item label="权限组别名称">
            <el-select v-model="ruleForm.permission_group_id" placeholder="请选择">
              <el-option v-for=" index in simple" :key="index.id" :label="index.title" :value="index.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="介绍" prop="introduction">
            <el-input placeholder="Please input" type="textarea" v-model="ruleForm.introduction"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- Form -->
  </div>
</template>

<script>
// 导入修改请求
// 导入添加请求
import { simple } from '@/api/base/permissions'
import { add, update } from '@/api/base/users'
// 导入空白vue对象兄弟传值
import eventBus from '@/EventBus'
export default {
  created () {
    // 发送请求接收组别
    this.getsimple()
    // console.log(this.editid)
    // 监听接收传值的组件传过来的值,send是自定义事件名
    eventBus.$on('edit', (value) => {
      // 判断是否是编辑状态，传过来的数据是否为空,为空什么都不做
      if (Object.keys(value).length === 0 && value.constructor === Object) {
        return
      }
      // 不为空传值给editid，并关闭密码按钮
      // console.log(value)
      this.editidopen = false
      this.editid = value
      // 再传给ruleForm
      this.ruleForm = value
    })
  },
  name: 'usersAdd',
  data () {
    return {
      simple: [], // 接收循环的权限数组
      editid: {}, // 接收一下编辑页面发过来的待编辑数据，但为了验证不使用这个
      editidopen: true, // 按钮，为true的时候密码框显示，为添加状态。否则不显示为编辑状态
      // 表单部分val
      ruleForm: {
        avatar: '',
        username: '',
        password: '',
        phone: '',
        email: '',
        role: '',
        permission_group_id: '',
        introduction: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: '邮箱格式错误',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '密码应为6-16位的长度',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  props: {
    showDialog: {
      // 传入控制是否显示？
      type: Boolean,
      default: false // 默认值
    },
    sunlist: {
      // 接收一下渲染的表格页面数据
      type: Array
    }
  },
  methods: {
    // 获取权限组别列表
    async getsimple () {
      try {
        const res = await simple()
        this.simple = res.data
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    showDialogfa () {
      this.$refs.ruleForm.resetFields()
      // 关闭重写按钮
      this.editidopen = true
      // 触发父组件的自定义事件
      this.$emit('gafalse')
    },
    // 提交方法
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            // 先判断是不是编辑状态,如果为true就是添加状态否则就是编辑
            if (this.editidopen) {
              console.log('进入添加')
              // 发送请求添加
              await add(this.ruleForm)
              // 通知父组件再拉取一下页面
              this.$emit('shuaxin')
              console.log('添加成功')
            } else {
              console.log('进入编辑')
              // 发送修改请求,这里因为请求了一下详情所以多了两个数据，解构后再覆盖
              await update({ ...this.ruleForm, last_update_time: null, create_time: null })
              // console.log(res)
              console.log('修改成功')
              // 通知父组件再拉取一下页面
              this.$emit('shuaxin')
              // 请求完毕打开密码显示
              this.editidopen = true
            }
            // 无论添加还是编辑清空表单
            this.$refs[formName].resetFields()
          } catch (error) {
            console.log('请求出错')
          }
          // 通知父组件关闭编辑弹窗
          this.$emit('gafalse')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消方法
    resetForm (formName) {
      // 关闭重写按钮
      this.editidopen = true
      // 清空表单
      this.$refs[formName].resetFields()
      // 关闭表单
      this.$emit('gafalse')
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

::v-deep .add-form {
  .box-card {
    width: 80%;
  }
}
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-form {
  width: 400px;
  margin: 0 auto 50px auto;
  .el-select {
    float: left;
  }
  .jieshao input {
    height: 50px;
  }
}
</style>
